<template>
  <div class="container">
    <search />
    <inform />
    <div class="btn-group">
      <div @click="routerLink(`answer`)">
        <img src="@/assets/btn_start.png" alt class="btn_start">
      </div>
      <img src="@/assets/btn_note.png" alt class="btn_note" @click="routerLink(`notebook`)">
      <img src="@/assets/btn_prize.png" alt class="btn_prize" @click="routerLink(`myCard`)">
      <div class="last-num">今日还剩: {{ lastNum }} 次</div>
    </div>
    <copy />
  </div>
</template>
<script>
// 引入组件
import search from '@/components/search'
import inform from '@/components/inform'
import copy from '@/components/layer/copy'
import { userLotteryNum } from '@/api/utils'
export default {
    components: {
        search: search,
        inform: inform,
        copy
    },
    data() {
        return {
            lastNum: 0
        }
    },
    async created() {
        const res = await userLotteryNum() || {}
        const { data = 0 } = res
        this.lastNum = data || 0
        console.log(process.env.NODE_ENV)
        if (process.env.NODE_ENV === 'development') {
            this.lastNum = 3
        }
        console.log(res)
    },
    methods: {
        routerLink(href) {
            if (this.lastNum <= 0 && href === 'answer') {
                return alert('剩余答题次数不足')
            }
            this.$router.push({
                name: href
            })
        }
    }
}
</script>
<style lang="less" scoped>
.container {
  width: 94%;
  // height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  .btn-group {
    position: relative;
  }
  .last-num {
    position: absolute;
    top: 48%;
    right: 13%;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
  }
  .search-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search {
      border: 2px solid #4076fb;
      border-radius: 20px;
      padding-left: 10px;
    }
  }
  .cc-img {
    width: 35%;
  }
  .search-btn {
    width: 9%;
    vertical-align: middle;
  }
  .icon_horn {
    width: 76px / 1.7;
    height: 64px / 1.7;
  }
  input {
    height: 30px;
    line-height: 30px;
    border: none;
  }
  .btn_start {
    width: 98%;
    padding: 0 3px 10px;
  }
  .btn_note,
  .btn_prize {
    width: 48%;
    padding: 0 3px;
  }
  .info-scroll {
    background: #ffd737;
    margin: 4% auto 3%;
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    .prise-wz {
      font-size: 14px;
      padding-left: 5px;
    }
    .prise {
      font-size: 17px;
      padding-left: 10px;
      font-weight: bold;
      color: rgb(193, 73, 223);
    }
  }
  .info {
    text-align: center;
    color: #b8b8b8;
    margin-top: 15px;
  }
}
</style>
